<template>
  <Transition name="playview">
    <div class="container" v-show="fullscreen">
      <div class="blurbackimg">
        <img :src="currentsong.pic" alt="" />
      </div>
      <Top :currentsong="currentsong" :class="{ topani }"></Top>
      <div
        class="middlewrap"
        @touchstart.prevent="touchstartf"
        @touchmove.prevent="touchmovef1"
        @touchend.prevent="touchendf"
      >
        <div class="cd" :style="Lstyle">
          <Rotatecd :currentsong="currentsong"></Rotatecd>
          <div class="lyric">{{ lyric[lyricindex]?.content }}</div>
        </div>
        <Scroll class="lyricscroll" :style="Rstyle" ref="scrollref">
          <p class="tip" v-if="currentsong.length === 0">
            此歌曲为纯音乐，请享受
          </p>
          <ul ref="scrollcontent" v-else>
            <li v-for="(item, i) in lyric" :key="item.time">
              <p :class="{ active: i === lyricindex }">{{ item.content }}</p>
            </li>
          </ul>
        </Scroll>
      </div>
      <Progress
        ref="progressref"
        :currentsong="currentsong"
        :progressvalue="progressvalue"
        @changetime="changetime"
        @touchmovef="touchmovef"
      ></Progress>
      <Operate
        :currentsong="currentsong"
        :audioref="audioref"
        ref="operateref"
      ></Operate>
      <audio
        ref="audioref"
        @ended="musicend"
        @canplay="canplay"
        @timeupdate="updateTime"
      ></audio>
    </div>
  </Transition>
  <Playmin
    :currentsong="currentsong"
    :fullscreen="fullscreen"
    @changeplaylist="changeplaylist"
  ></Playmin>
  <Playlist ref="playlistref"></Playlist>
</template>

<script>
import { computed, onMounted, ref, watch } from 'vue'
import { useStore } from 'vuex'
import Operate from './components/operate.vue'
import Top from './components/top.vue'
import Progress from './components/progress.vue'
import Rotatecd from './components/rotatecd'
import Scroll from '@/components/base/scroll/scroll.vue'
import Playmin from './components/playmin'
import Playlist from './components/playlist.vue'
import { useEntire } from './useEntire'
export default {
  name: 'SongView',
  components: { Operate, Top, Progress, Scroll, Rotatecd, Playmin, Playlist },
  setup () {
    const playlistref = ref(null)
    const audioref = ref(null)
    const store = useStore()
    const fullscreen = computed(() => store.state.fullscreen)
    const currentsong = computed(() => store.getters.currentsong)
    const playmode = computed(() => store.state.playmode)
    const playing = computed(() => store.state.playing)
    const progressvalue = ref(0)
    const {
      lyric,
      lyricindex,
      scrollref,
      scrollcontent,
      Rstyle,
      Lstyle,
      touchstartf,
      touchmovef1,
      touchendf
    } = useEntire(currentsong, progressvalue)
    onMounted(() => {
      // if (!audioref.value) return
      audioref.value.src = currentsong.value.url
      audioref.value.play()
    })
    watch(playing, (newv) => {
      if (newv) {
        audioref.value.play()
      } else {
        audioref.value.pause()
      }
    })
    watch(currentsong, () => {
      audioref.value.src = currentsong.value.url
    })
    // 调用operate组件的方法
    const operateref = ref(null)
    const musicend = () => {
      if (playmode.value === 2) {
        audioref.value.currentTime = 0
        progressvalue.value = 0
        audioref.value.play()
        return
      }
      operateref.value.musicend()
    }
    const canplay = () => {
      operateref.value.canplay()
    }

    // 调用progressref组件的方法
    const progressref = ref(null)
    const currenttime = ref(0)
    const isslider = ref(false)
    const updateTime = (e) => {
      if (isslider.value) return
      progressvalue.value = e.target.currentTime / currentsong.value.duration
      lyric.value.forEach((item, i) => {
        if (e.target.currentTime * 1000 > item.time) {
          return store.commit('changelyricindex', i)
        }
      })
    }
    const touchmovef = (precent) => {
      isslider.value = true
      progressvalue.value = precent
    }
    const changetime = (precent) => {
      isslider.value = false
      progressvalue.value = precent
      audioref.value.currentTime = currentsong.value.duration * precent
    }

    // 离开动画
    const topstyle = ref(null)
    const viewleave = (el) => {
      topstyle.value = {
        transitionDuration: '300ms',
        transform: 'translateY(-100%)'
      }
    }
    // 顶部动画
    const topani = ref(false)
    watch(fullscreen, (newv) => {
      topani.value = newv
    })

    // playlist方法
    const changeplaylist = () => {
      playlistref.value.changevisible()
    }
    return {
      changeplaylist,
      topani,
      topstyle,
      viewleave,
      operateref,
      currentsong,
      audioref,
      musicend,
      canplay,
      progressref,
      updateTime,
      changetime,
      progressvalue,
      touchmovef,
      currenttime,
      lyric,
      lyricindex,
      scrollref,
      scrollcontent,
      Rstyle,
      Lstyle,
      touchstartf,
      touchmovef1,
      touchendf,
      fullscreen,
      playlistref
    }
  }
}
</script>

<style scoped lang="scss">
.middlewrap {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 100px;
  bottom: 150px;
  left: 0;
  white-space: nowrap;
  z-index: 100;
  & > .cd {
    width: 100%;
    height: 100%;
    display: inline-block;
    & > .lyric {
      position: absolute;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      width: 100%;
      text-align: center;
      top: 350px;
    }
  }
}
.lyricscroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: inline-block;
  ul {
    width: 80%;
    left: 10%;
    position: absolute;
    li {
      width: 100%;
      p {
        width: 100%;
        text-align: center;
        height: 32px;
        line-height: 32px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 14px;
        &.active {
          color: white;
        }
      }
    }
  }
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
  .blurbackimg {
    width: 100%;
    height: 100%;
    filter: blur(20px);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
//顶部动画
.topani {
  animation: topmov 0.6s 1;
}
</style>
